<script setup lang="ts">
  defineOptions({ name: 'CounterView' });
  import { useCounter } from './counter.store';

  const counter = useCounter(3, { min: -3, max: 5 });
</script>

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <button @click="counter.decrement" :disabled="counter.isMin.value">Decrement</button>
    <button @click="counter.increment" :disabled="counter.isMax.value">Increment</button>
    <button @click="counter.reset">Reset</button>
  </div>
</template>

<style scoped>
  .counter {
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    border: 1px solid #eee;
    border-radius: 8px;
    text-align: center;
  }
  button {
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
    font-size: 1.1rem;
  }
</style>
